{% block sw_login_login %}
<form
    class="sw-login-login"
    @submit.prevent="loginUserWithPassword"
>
    {% block sw_login_login_form_headline %}
    <h2 class="sw-login__content-headline">
        {{ $tc('sw-login.index.headlineForm') }}
    </h2>
    {% endblock %}

    {% block sw_login_login_alert %}
    <mt-banner
        v-if="showLoginAlert"
        variant="info"

        :show-icon="true"
        :closable="false"
    >
        {{ loginAlertMessage }}
    </mt-banner>
    {% endblock %}

    {% block sw_login_login_user_field %}

    <mt-text-field
        v-model="username"
        v-autofocus
        name="sw-field--username"
        :label="$tc('sw-login.index.labelUsername')"
        :placeholder="$tc('sw-login.index.placeholderUsername')"
        :disabled="showLoginAlert"
        required
    />
    {% endblock %}

    {% block sw_login_login_password_field %}
    <mt-password-field
        v-model="password"
        name="sw-field--password"
        :label="$tc('sw-login.index.labelPassword')"
        :placeholder="$tc('sw-login.index.placeholderPassword')"
        :disabled="showLoginAlert"
        required
    />
    {% endblock %}

    <mt-checkbox
        v-model:checked="rememberMe"
        :label="$tc('sw-login.index.labelKeepLoggedIn')"
    />

    {% block sw_login_login_submit %}
    <div class="sw-login__submit">
        {% block sw_login_login_forgot_password %}
        <router-link
            :to="{ name: 'sw.login.index.recovery' }"
            class="sw-login__forgot-password-action"
        >
            {{ $tc('sw-login.index.forgottenPasswordLink') }}
        </router-link>
        {% endblock %}

        {% block sw_login_login_submit_button %}
        <mt-button
            :disabled="password.length <= 0 || username.length <= 0 || showLoginAlert"
            class="sw-login__login-action"
            variant="primary"
            type="submit"
        >
            {{ $tc('sw-login.index.buttonLogin') }}
        </mt-button>
        {% endblock %}
    </div>
    {% endblock %}
</form>
{% endblock %}
